<template>
  <div>
    <a-card :bordered="false" style="padding: 0px;height: 273px">
      <a-row>
        <a-col :sm="4" :xs="24" style="background: #f6f8f9;">
          <div class="detail-handle fl">
            <div><h3>{{ workHour }}</h3>
              <p>今日工作时长</p></div>
            <!--            <i class="icon iconfont iconcontract"> 查看日报</i> &lt;!&ndash;&ndash;&gt;-->
            <a-button type="primary">撰写日报</a-button>
          </div>
          <div class="detail-handle fl">
            <div><h3>{{ workHourRemain }}</h3>
              <p>剩余时长</p></div>
          </div>
        </a-col>
        <a-col :sm="20" :xs="24">
          <a-col :span="24" align="right">
            <a-button type="link">全部工作日志</a-button>
          </a-col>
          <bar title="" :dataSource="barData" style="height: 200px" :height="200" yaxis-text="分钟"/>
        </a-col>
      </a-row>
    </a-card>

    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="工作计划">
      <a-row>
        <a-col :sm="1" :xs="24" align="left">
          <div>
            <a-avatar slot="avatar" size="small" style="background-color: #1890ff">+</a-avatar>
          </div>
        </a-col>
        <a-col :sm="18" :xs="24">
          <a-input :bordered="false" style="border: 0" placeholder="添加新任务"/>
        </a-col>
        <a-col :sm="5" :xs="24" align="right">
          <a-button type="primary">添加</a-button>
        </a-col>
      </a-row>
      <a-list size="large">
        <a-list-item>
          <!--          <a-list-item-meta >-->
          <!--            &lt;!&ndash;<a-avatar slot="avatar" size="small" shape="square" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"/>&ndash;&gt;-->
          <!--            <a-avatar slot="avatar" size="small"  style="background-color: #1890ff">+</a-avatar>-->
          <!--          </a-list-item-meta>-->
        </a-list-item>
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a>编辑</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a>编辑</a></a-menu-item>
                <a-menu-item><a>删除</a></a-menu-item>
              </a-menu>
              <a>更多
                <a-icon type="down"/>
              </a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>Owner</span>
              <p>{{ item.owner }}</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>{{ item.startAt }}</p>
            </div>
            <div class="list-content-item">
              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status"
                          style="width: 180px"/>
            </div>
          </div>
        </a-list-item>
      </a-list>

    </a-card>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="最近工作截图">
      <a-row>
        <a-col :span="24" align="right">
          <a-button type="link">全部工作日志</a-button>
        </a-col>
      </a-row>
      <a-row>
        <!-- 预览区域 -->
        <a-col :span="24">
          <template>
            <div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
              <div
                style="float: left;padding-left: 30px;width:204px;height:204px;margin-right: 10px;margin: 0 18px 18px 0;">
                <div
                  style="width: 100%;height: 80%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="width: 100%;height: 80%;cursor: pointer" :src="fileDetail.imgUrl"
                       :preview="dataSource[0].key">
                </div>
                <div class="meta">
                  <p>{{fileDetail.dates}}</p>
                  <div class="action cl"><span class="fl">强度:</span>
                    <div class="rate cl wrapper">
                      <a-rate :value="fileDetail.strength" color="#3fd153" :allowClear="false" :count="10" :disabled=true>
                        <a-icon slot="character" type="star" theme="filled" style="font-size:12px;"/>
                      </a-rate>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import {BorderOutlined} from '@ant-design/icons-vue';
import Trend from '@/components/Trend'
import Rate from 'ant-design-vue/es/vc-rate/src/Rate'
import {getAction, postAction} from '@/api/manage'

const data = []
const barData = []
data.push({
  title: 'Alipay',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  description: '那是一种内在的东西， 他们到达不了，也无法触及的',
  owner: '付晓晓',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 90
  }
})
data.push({
  title: 'Angular',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
  owner: '曲丽丽',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 54
  }
})
data.push({
  title: 'Ant Design',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  description: '生命就像一盒巧克力，结果往往出人意料',
  owner: '林东东',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 66
  }
})
data.push({
  title: 'Ant Design Pro',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
  owner: '周星星',
  startAt: '2018-07-26 22:44',
  progress: {
    value: 30
  }
})
data.push({
  title: 'Bootstrap',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: '那时候我只会想自己想要什么，从不想自己拥有什么',
  owner: '吴加好',
  startAt: '2018-07-26 22:44',
  progress: {
    status: 'exception',
    value: 100
  }
})

export default {
  name: "StandardList",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Rate,
    BorderOutlined
  },
  data() {
    return {
      data,
      barData,
      userId: null,
      workHour: "",
      fileDetails: [],
      //数据集
      dataSource: []
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      getAction('/sysUserReport/workHour', {userId: this.userId}).then(res => {
        console.log(res)
        if (res.success) {
          this.workHour = res.result.workTime;
          this.workHourRemain = res.result.workHourRemain + "工时";
        }
      });
      getAction('/sysUserReport/workHourChar', {userId: this.userId}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          for (let i = 0; i < list.length; i++) {
            barData.push({
              x: list[i].dayShort,
              y: list[i].workHour
            })
          }
        }
      });
      getAction('/sysUserReport/list', {userId: this.userId}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          this.fileDetails = [];
          for (let i = 0; i < list.length; i++) {
            this.fileDetails.push({
              imgUrl: list[i].pic,
              dates: list[i].dates,
              strength: list[i].strength
            })
          }
          this.dataSource.push({
            key: 0,
            fileDetails: this.fileDetails
          })
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.detail-handle {
  width: 200px;
  height: 100%;
  padding: 30px 0 30px 30px;
  box-sizing: border-box;
}

.fl {
  float: left;
  margin-top: 6px;
}

.detail-handle h3 {
  font-size: 20px;
  color: #092235;
  line-height: 30px;
  font-weight: 700;
}

.detail-handle p {
  font-size: 14px;
  color: #9ca6ae;
  line-height: 20px;
  margin-bottom: 80px;
}

.detail-handle i {
  font-size: 14px;
  color: #008bf7;
  cursor: pointer;
}

::v-deep .wrapper li {
  margin-right: 0px;
}

.ant-rate {
  color: #3fd153;
}
</style>